<template>
  <view>
    <map id="map" :latitude="latitude" :longitude="longitude" :markers="markers"
      style="width: 100%; height: 100vh;"></map>
  </view>
</template>

<script>
import { queryMapList } from '@/api/water';
export default {
  data() {
    return {
      latitude: 36.667763, // 地图中心纬度
      longitude: 117.028663, // 地图中心经度
      markers: []
    };
  },
  onLoad() {
    this.getLocation()
  },
  methods: {
    // 获取当前位置
    getLocation() {
      uni.getLocation({
        type: 'wgs84', // 返回GPS经纬度
        success: (res) => {
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          this.queryList()
        },
        fail: (err) => {
          console.error('获取位置失败:', err);
          uni.showToast({
            title: '获取位置失败',
            icon: 'none',
          });
        },
      });
    },
    async queryList() {
      const newData = await queryMapList(
        {
          page: 1,
          pageSize: 9999,
          // lat:this.latitude.toString(),
          // lng:this.longitude.toString(),
          all:'all'
        })
        this.markers = newData.data.map((e,index)=>{
            const obj = {
              id:index+1,
              latitude: e.lat,
              longitude: e.lng,
              name: e.address,
              width: 20,
              height: 30
            }
            return obj
        })

    },
  }
};
</script>

<style>
/* 样式可以根据需要自定义 */
</style>